import React,{useState} from 'react';
import { Breadcrumb,Form,Input,Button,Card ,notification,message, Select,Tree  } from 'antd';
import { useNavigate } from 'react-router-dom';
import { admin_add } from '../../../api/api';
import type { DataNode } from 'antd/es/tree';
interface Props{

}
function Adduser(props:Props) {
    var navigate = useNavigate()
    const onFinish = (values:any)=>{
        admin_add(values).then((res)=>{
            console.log(res.data);
            if(res.data.code == 200){
                notification.success({message:'添加管理员成功'})
                navigate('/index/users')
            }else{
                notification.error({message:res.data.message})
            }
            
        })
        
    }
    const { Option } = Select;
    const [form] = Form.useForm();
    var [open,setOpen] = useState<boolean>(false);
    const onGenderChange = (value: string) => {
        console.log(value);
        
        switch (value) {
          case '1':
            form.setFieldsValue(1);
            break;
          case '2':
            form.setFieldsValue(2);
            break;
          case '3':
            form.setFieldsValue(3);
            break;
          default:
        }
      };
      //权限数据
    const treeData: DataNode[] = [
      {
        title: '轮播图管理',
        key: '0-0',
        children: [
          {
            title: '轮播图列表',
            key: '0-0-0'
          }
        ],
      },
      {
        title: '账号管理',
        key: '0-1',
        children: [
          { title: '管理员列表', key: '0-1-0' },
        ],
      },
      {
        title:'产品管理',
        key:'0-2',
        children:[
          { title: '产品列表',key: '0-2-0' },
          { title: '秒杀列表',key: '0-2-1' },
          { title: '推荐列表',key: '0-2-2' },
          { title: '筛选列表',key: '0-2-3' },

        ]
      },
      {
        title:'数据可视化',
        key:'0-3',
        children:[
          { title: 'Echarts使用',key: '0-3-0' }
        ]
      },
      {
        title:'编辑器',
        key:'0-4',
        children:[
          { title:'富文本编辑器',key:'0-4-0' }
        ]
      },
      {
        title:'Excel管理',
        key:'0-5',
        children:[
          { title:'excel导入',key:'0-5-0' },
          { title:'excel导出',key:'0-5-1' }
        ]
      },
      {
        title:'地图管理',
        key:'0-6',
        children:[
          { title:'百度地图',key:'0-6-0' }
        ]
      }
  ];
        //树形控件(权限)的复选框 勾选发生变化时执行
        var onCheck = (checkedKeys:any)=>{
          form.setFieldValue('checkedKeys',checkedKeys);//设置表单项checkedKeys的值
          // form.setFieldsValue();//所有表单项的回显 使用这个方法
      }
    return (
        <div>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
              <Breadcrumb.Item>账号管理</Breadcrumb.Item>
              <Breadcrumb.Item>添加管理员</Breadcrumb.Item>
            </Breadcrumb>
            <Card>
                <Form
                 labelCol={{ span: 6 }}
                 wrapperCol={{ span: 8 }}
                 onFinish={onFinish}
                 form={form}
                 >
    
                     <Form.Item
                         label="adminname"
                         name="adminname"
                         rules={[{ required: true, message: '输入用户名' }]}
                     >
                         <Input placeholder='输入adminname'/>
                     </Form.Item>
                     <Form.Item
                         label="password"
                         name="password"
                         rules={[{ required: true, message: '输入密码' }]}
                     >
                         <Input type='password' placeholder='输入密码'/>
                     </Form.Item>
                     <Form.Item
                         label="role"
                         name="role"
                         rules={[{ required: true, message: '输入base' }]}
                     >
                        <Select
                          placeholder="Select a option"
                          onChange={onGenderChange}
                          allowClear
                        >
                          <Option value={1}>超级管理员</Option>
                          <Option value={2}>普通管理员</Option>
                          <Option value={3}>用户</Option>
                        </Select>
                     </Form.Item>
                     <Form.Item 
                        label="权限" 
                        name="checkedKeys"
                        rules={[{ required: true, message: '请选择权限' }]}>
                        <Tree
                            checkable
                            treeData={treeData}
                            onCheck={onCheck} //
                            // checkedKeys={checkedKeys}
                        />
                    </Form.Item>
    
                  
    
                     <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                         <Button type="primary" htmlType="submit">提交</Button>
                     </Form.Item>
                 </Form>
            </Card>
        </div>
    );
}

export default Adduser;